# React 构建插件 

## 安装插件
import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @empjs/plugin-react -D" />

## 配置插件
```ts title="emp-config.js"
import pluginReact from '@empjs/plugin-react'
import {defineConfig} from '@empjs/cli'
export default defineConfig(({mode, env}) => {
  return {
    plugins: [pluginReact()],
  }
})
```
## React HMR
```ts title="emp-config.js"
import pluginReact from '@empjs/plugin-react'
import {defineConfig} from '@empjs/cli'
export default defineConfig(({mode, env}) => {
  return {
    plugins: [pluginReact({hmr: true})],
  }
})
```
## React SVGR
```js 
import LogoComponent from 'src/assets/logo.svg?react'

//使用
<LogoComponent className="logo" />

//ts集成
declare module '*.svg?react' {
  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
  export default ReactComponent
}
```
自定义配置
```ts title="emp-config.js"
import pluginReact from '@empjs/plugin-react'
import {defineConfig} from '@empjs/cli'
export default defineConfig(({mode, env}) => {
  return {
    plugins: [pluginReact({svgrQuery: 'react'})],
  }
})
```